<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>屏幕共享</title>
</head>
<body style="overflow:hidden">
<div id="startShare" style="display:none">
  <img
      id="img"
      src=""
      alt="网络连接异常，请刷新页面重试！"
      style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"
      ondblclick="end()"
  />
  <span id="fps" style="position:absolute;top:10px;right:10px;color:red">0.00 FPS</span>
</div>
<div id="endShare">
  <h1>屏幕共享</h1>
  <h2 id="info"></h2>
  <div id="online" style="display:none">
    <h2 id="screen"></h2>
    <button onclick="start(true)" style="font-size:30px;">点击开始</button>
    <h2>双击图像结束共享</h2>
  </div>
</div>
<script>
  let ws;
  let imgWidth;
  let imgHeight;
  let frame;
  let port;
  let lastTime;
  let frameCount;
  let frameAvg;
  let fpsInterval;
  const startShare = document.getElementById("startShare");
  const img = document.getElementById("img");
  const fps = document.getElementById("fps");
  const endShare = document.getElementById("endShare");
  const info = document.getElementById("info");
  const screen = document.getElementById("screen");
  const online = document.getElementById("online");

  adjustImg();
  start(false);

  // 调整图片大小
  function adjustImg() {
    if (imgWidth / window.innerWidth < imgHeight / window.innerHeight) {
      img.style.height = "100%";
      img.style.width = null;
    } else {
      img.style.width = "100%";
      img.style.height = null;
    }
    screen.innerHTML = "当前屏幕尺寸&ensp;<code>" + window.innerWidth + "x" + window.innerHeight + "px</code>";
  }

  // 获取视频信息
  function start(open) {
    fetch("/api/getVideoInfo" + (port == 0 ? "?code=" + prompt("请输入密码") : ""))
        .then(resp => resp.json())
        .then(json => {
          imgWidth = json.width;
          imgHeight = json.height;
          frame = json.frame;
          port = json.port;
          online.style.display = "block";
          info.innerHTML = "远端视频尺寸&ensp;<code>" + imgWidth + "x" + imgHeight + "px</code>&emsp;每秒帧数&ensp;<code>" + frame + " FPS</code>";
          if (open) {
            if (port == 0) {
              alert("密码错误！");
            } else {
              startWs(port);
            }
          }
        })
        .catch(() => {
          img.src = "";
          online.style.display = "none";
          info.innerHTML = "网络连接异常，请刷新页面重试！";
        })
  }

  // 开启webSocket
  function startWs(port) {
    ws = new WebSocket("ws://" + window.location.hostname + ":" + port + "/")
    ws.onopen = function () {
      startShare.style.display = "block";
      endShare.style.display = "none";
      lastTime = new Date();
      frameCount = 0;
      fpsInterval = setInterval(() => {
        fps.innerText = frameAvg
      }, 5000);
    }
    ws.onmessage = function (e) {
      ws.send("\0");
      URL.revokeObjectURL(img.src);
      img.src = URL.createObjectURL(new Blob([e.data], {type: 'image/jpeg'}));
      if ((++frameCount) % 5 == 0) {
        let now = new Date();
        frameAvg = (5000.0 / (now.getTime() - lastTime.getTime())).toFixed(2) + " FPS";
        lastTime = now;
      }
    }
    ws.onclose = function () {
      end();
    }
    ws.onerror = function () {
      end();
    }
  }

  // 结束
  function end() {
    img.src = "";
    endShare.style.display = "block";
    startShare.style.display = "none";
    ws.close();
    clearInterval(fpsInterval);
    fps.innerText = "0.00 FPS"
  }

  // 窗口大小发生变化时
  window.onresize = () => {
    adjustImg();
  };

</script>
</body>
</html>
